<template>
    <div id="header">
        <div class="nav">订单</div>
        <div class="order">
            <img src="../assets/images/order.jpg" alt="">
            <div class="text">暂无进行中订单</div>
        </div>
        <div class="other">
            <div class="order-top">
                历史订单
            </div>
            <div class="order-bottom">
                <ul class="history">
                    <li class="h1">
                        <div class="history-left">
                            <div class="i1 iconfont icon-xiyiji"></div>
                        </div>
                        <div class="history-right t1">
                            <div class="text-top">洗烘</div>
                            <div class="text-bottom">包括洗衣机/烘干机/洗鞋机的所有订单</div>
                        </div>
                        <div class="jiantou">
                            <img src="../assets/images/arrow-right.png" alt="">
                        </div>
                    </li>
                    <li class="h1">
                        <div class="history-left">
                            <div class="i2 iconfont icon-yinshuiji"></div>
                        </div>
                        <div class="history-right t2">
                            <div class="text-top">饮用水</div>
                            <div class="text-bottom">使用直饮水和开水器的所有消费记录</div>
                        </div>
                        <div class="jiantou">
                            <img src="../assets/images/arrow-right.png" alt="">
                        </div>
                    </li>
                    <li class="h1">
                        <div class="history-left">
                            <div class="i1 iconfont icon-linyunvsheng"></div>
                        </div>
                        <div class="history-right t3">
                            <div class="text-top">淋浴</div>
                            <div class="text-bottom">使用淋浴的所有消费记录</div>
                        </div>
                        <div class="jiantou">
                            <img src="../assets/images/arrow-right.png" alt="">
                        </div>
                    </li>
                    <li class="h1">
                        <div class="history-left">
                            <div class="i1 iconfont icon-kongtiao"></div>
                        </div>
                        <div class="history-right t4">
                            <div class="text-top">空调</div>
                            <div class="text-bottom">租赁、退货的所有订单</div>
                        </div>
                        <div class="jiantou">
                            <img src="../assets/images/arrow-right.png" alt="">
                        </div>
                    </li>
                    <li class="h1">
                        <div class="history-left">
                            <div class="i1 iconfont icon-chuifengji"></div>
                        </div>
                        <div class="history-right t5">
                            <div class="text-top">吹风机</div>
                            <div class="text-bottom">使用吹风机的所有订单</div>
                        </div>
                        <div class="jiantou">
                            <img src="../assets/images/arrow-right.png" alt="">
                        </div>
                    </li>
                    
                    
                </ul>
            </div>
        </div>
        <div class="img">
            <img src="../assets/images/1.png" alt="">
        </div>
        <my-footer></my-footer>
    </div>
</template>


<script>
import myFooter from "@/components/myfooter.vue";
import "../assets/fonts/iconfont.css";
export default {
    name:"order",
    components: {
    myFooter
  },
}
</script>



<style scoped lang="scss">
    #header {
        .nav {
            text-align: center;

        }
        .order {
            img {
                width: 200px;
                height: 100px;
                margin-left: 57px;
                margin-bottom: 10px;
            }
            div {
                text-align: center;
            }
        }
        .other {
            .order-top{
                font-size: 12px;
            }
            .order-bottom {
                .history {
                    list-style: none;
                    margin-left: -36px;
                    .h1 {
                        display: flex;
                        justify-content: space-between;
                        margin-right: 41px;
                        .history-left{

                            .i1{
                                font-size: 30px;
                                margin-bottom: 10px;
                            } 
                            .i2{
                                font-size: 40px;
                                margin-left: -6px;
                                margin-bottom: 10px;
                            }
                        }
                        .history-right{
                            .text-top{ 
                                font-size: 14px;
                            }
                            .text-bottom {
                                font-size: 10px;
                                color: #afafaf;
                            }
                        }
                        .t1 {
                             margin-left: 10px;
                        }
                         .t2 {
                             margin-left: -4px;
                        }
                         .t3 {
                             margin-left: -59px;
                        }
                         .t4 {
                             margin-left: -72px;
                        }
                         .t5 {
                             margin-left: -75px;
                        }
                        .jiantou {
                            position: relative;
                            img {
                                width: 15px;
                                height: 15px;
                                position: absolute;
                                left:0;
                                top: 10px;
                            }
                        }
                    }
                }
            }

        }
        .img {
            margin-bottom: 80px;
            img {
                width: 100%;
                height: 100px;
            }
        }
    }
</style>